웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
angularjs에서 가장 많이 사용되는 디렉티브 중 하나가 바로 ng-repeat라고 할 수 있습니다. 워낙 많이 사용되기 때문에 반드시 알아야 하는 필수 디렉티브로 아래는 ng-repeat의 쓰임과 활용에 대하여 상세히 알아보려합니다.
예를 들어 fruit이라는 변수가 있고 이를 ng-repeat를 사용하여 연속된 과일을 목록으로 만들어 보여주려면 아래와 같이 사용할 수 있습니다.
아래는 스크립트가 사용된 코드입니다.
위 예제에서는 app이라는 모듈을 선언하고 fruits라는 배열안에 몇개의 과일에 대한 정보를 입력 후 ng-repeat를 사용하여 출력하였습니다.
예제 안에는 $index라는 내장변수를 사용하였습니다. $index는 해당하는 값의 순서를 0부터 차례대로 반환합니다. 위에서 $index +1을 사용하였으므로 맨 처음 나타나는 값은 1이 됩니다.
먼저 6개 내장변수는 다음과 같습니다. 아래 값들 중에서 $index만 숫자 타입으로 해당값을 반환하며 나머지는 모두 불리언(boolean) 타입으로 반환합니다.
$index [string]
// 반복되는 값의 순서를 0부터 숫자로 반환
$first [boolean]
// 첫번째 순서에 해당하는 경우 true를 반환
$middle [boolean]
// 중간에 해당하는 경우 true를 반환
$last [boolean]
// 마지막에 해당하는 경우 true를 반환
$odd [boolean]
// 홀수번째 값인 경우에만 true를 반환
$even [boolean]
// 짝수번째 값인 경우에만 true를 반환
내장변수를 사용할 경우 해당하는 값에만 스타일을 주는 등의 활용이 가능합니다. 예를들어 홀수번째 해당하는 값들만 빨간색으로 표현할 경우 아래와 같이 사용이 가능합니다.
아래와 같은 방법으로 원하는 값을 기준으로 정렬이 가능합니다.
! ng-repeat의 역할
ng-repeat는 연속된 여러개의 값을 가진 데이터 값을 사용하여 하나의 리스트 또는 목록으로 반환하고 보여주는 기능을 가지고 있습니다. ng-repeat는 for()문 또는 제이쿼리의 $forEach()와 비슷한 동작을 구현합니다. 그럼 아래는 예제코드입니다.예를 들어 fruit이라는 변수가 있고 이를 ng-repeat를 사용하여 연속된 과일을 목록으로 만들어 보여주려면 아래와 같이 사용할 수 있습니다.
1 - banana : 100원
2 - mango : 300원
3 - grape : 500원
위 내용은 출력 될 모습으로 상세 코드는 아래와 같습니다.2 - mango : 300원
3 - grape : 500원
<ul ng-app="app" ng-controller="AppCtrl">
<li ng-repeat="item in fruits">{{ $index + 1 }} - {{ item.name }} : {{ item.price }}</li>
</ul>
<li ng-repeat="item in fruits">{{ $index + 1 }} - {{ item.name }} : {{ item.price }}</li>
</ul>
아래는 스크립트가 사용된 코드입니다.
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
$scope.fruits = [
{
name: 'banana',
price: '100원'
},
{
name: 'mango',
price: '300원'
},
{
name: 'grape',
price: '500원'
}
];
});
</script>
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
$scope.fruits = [
{
name: 'banana',
price: '100원'
},
{
name: 'mango',
price: '300원'
},
{
name: 'grape',
price: '500원'
}
];
});
</script>
위 예제에서는 app이라는 모듈을 선언하고 fruits라는 배열안에 몇개의 과일에 대한 정보를 입력 후 ng-repeat를 사용하여 출력하였습니다.
예제 안에는 $index라는 내장변수를 사용하였습니다. $index는 해당하는 값의 순서를 0부터 차례대로 반환합니다. 위에서 $index +1을 사용하였으므로 맨 처음 나타나는 값은 1이 됩니다.
# ng-repeat 내장변수 알아보기
먼저 6개 내장변수는 다음과 같습니다. 아래 값들 중에서 $index만 숫자 타입으로 해당값을 반환하며 나머지는 모두 불리언(boolean) 타입으로 반환합니다.
$index [string]
// 반복되는 값의 순서를 0부터 숫자로 반환
$first [boolean]
// 첫번째 순서에 해당하는 경우 true를 반환
$middle [boolean]
// 중간에 해당하는 경우 true를 반환
$last [boolean]
// 마지막에 해당하는 경우 true를 반환
$odd [boolean]
// 홀수번째 값인 경우에만 true를 반환
$even [boolean]
// 짝수번째 값인 경우에만 true를 반환
내장변수를 사용할 경우 해당하는 값에만 스타일을 주는 등의 활용이 가능합니다. 예를들어 홀수번째 해당하는 값들만 빨간색으로 표현할 경우 아래와 같이 사용이 가능합니다.
<style type="text/css">
.red { color: red; }
</style>
<ul>
<li ng-repeat="item in fruits">
<span ng-class="$odd ? 'red' : 'black'">{{ item.name }}</span>
</li>
</ul>
홀수번째에 해당하는 값의 경우 class명에 red가 추가되는 예제입니다. 즉 모든 홀수번째 아이템은 빨간색으로 처리됩니다..red { color: red; }
</style>
<ul>
<li ng-repeat="item in fruits">
<span ng-class="$odd ? 'red' : 'black'">{{ item.name }}</span>
</li>
</ul>
# 오름차순 정렬하는 방법
아래와 같은 방법으로 원하는 값을 기준으로 정렬이 가능합니다.
<li ng-repeat="item in fruits | orderBy: 'no'">
...
</li>
파이프라인 | 뒤에 orderBy를 사용하여 정렬할 기준 값을 입력하면 됩니다. 여기서는 no를 사용하였습니다....
</li>
아래의 글도 찾고 계시지 않나요?
- Python jinja 템플릿 for 루프 사용시 cycle 메서드 사용하기
- [scss] 리스트 타입 선언 방법과 반복문 사용하기, @each
VueJS 커스텀 디렉티브 만들기
[VueJS] vue-for 반복문 알아보기
자바스크립트 for 반복문 약식 표현 예제보기
자바스크립트 while 반복문 예제 및 정보- angularjs에서 ngNonBindable 디렉티브를 사용한 컴파일 피하기
- Angular factory() 메소드로 서비스 모듈 만들기
- $scope.$apply() 사용시 $digest 에러가 발생하는 경우 해결방법
- AngularJS 디렉티브 생성시 require를 사용한 모델 가져오는 방법